<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>炫彩俄罗斯方块</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
            color: #fff;
        }

        .game-container {
            display: flex;
            gap: 40px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }

        #game-board {
            border: 3px solid #4cc9f0;
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.3);
        }

        .info-panel {
            display: flex;
            flex-direction: column;
            gap: 25px;
            padding: 20px;
            min-width: 300px;
        }

        .score-box {
            background: rgba(76, 201, 240, 0.1);
            padding: 20px;
            border-radius: 10px;
            border: 2px solid #4cc9f0;
        }

        .score-box h2 {
            color: #4cc9f0;
            margin-bottom: 10px;
            font-size: 1.2em;
        }

        .score-value {
            font-size: 2em;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
        }

        .controls {
            background: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 8px;
            display: grid;
            grid-template-columns: repeat(3, 40px);
            grid-template-rows: repeat(3, 40px);
            gap: 5px;
            justify-content: center;
            margin-top: 20px;
        }

        .controls p {
            margin: 8px 0;
            color: #fff;
            font-size: 0.9em;
            grid-column: 1 / span 3;
        }

        .controls button {
            width: 40px;
            height: 40px;
            padding: 0;
            background: rgba(76, 201, 240, 0.1);
            border-radius: 5px;
            border: 2px solid #4cc9f0;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .controls button:hover {
            background: rgba(76, 201, 240, 0.2);
        }

        #up-btn {
            grid-column: 2;
            grid-row: 1;
        }

        #left-btn {
            grid-column: 1;
            grid-row: 2;
        }

        #right-btn {
            grid-column: 3;
            grid-row: 2;
        }

        #down-btn {
            grid-column: 2;
            grid-row: 3;
        }

        #pause-btn {
            grid-column: 2;
            grid-row: 2;
            background: rgba(243, 156, 18, 0.2);
            border: 2px solid #f39c12;
        }

        #pause-btn:hover {
            background: rgba(243, 156, 18, 0.3);
        }

        #pause-overlay {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 20px 40px;
            border-radius: 15px;
            font-size: 2em;
            display: none;
            text-shadow: 0 0 10px #4cc9f0;
            border: 2px solid #4cc9f0;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <canvas id="game-board" width="300" height="600"></canvas>
        <div class="info-panel">
            <div class="score-box">
                <h2>得分</h2>
                <div class="score-value" id="score">0</div>
            </div>
            <div class="score-box">
                <h2>等级</h2>
                <div class="score-value" id="level">1</div>
            </div>
            <div class="score-box">
                <h2>控制说明</h2>
                <p>↑ 旋转方块</p>
                <p>↓ 加速下落</p>
                <p>← → 移动</p>
                <p>空格 暂停</p>
            </div>
            <div class="controls">
                <button id="up-btn">↑</button>
                <button id="left-btn">←</button>
                <button id="pause-btn">⏸</button>
                <button id="right-btn">→</button>
                <button id="down-btn">↓</button>
            </div>
        </div>
    </div>
    <div id="pause-overlay">游戏暂停</div>

    <script>
        const canvas = document.getElementById('game-board');
        const ctx = canvas.getContext('2d');
        const BLOCK_SIZE = 30;
        const BOARD_WIDTH = 10;
        const BOARD_HEIGHT = 20;
        
        let board = Array(BOARD_HEIGHT).fill().map(() => Array(BOARD_WIDTH).fill(0));
        let currentPiece = null;
        let score = 0;
        let level = 1;
        let isPaused = false;
        let dropSpeed = 1000;
        let lastDrop = 0;

        const SHAPES = [
            [[1,1,1,1]], 
            [[1,1],[1,1]], 
            [[1,1,1],[0,1,0]], 
            [[1,1,1],[1,0,0]], 
            [[1,1,1],[0,0,1]], 
            [[1,1,0],[0,1,1]], 
            [[0,1,1],[1,1,0]]
        ];

        const COLORS = ['#4cc9f0', '#7209b7', '#3a0ca3', '#4361ee', '#4895ef', '#00b4d8', '#0077b6'];

        class Piece {
            constructor(shape, color) {
                this.shape = shape;
                this.color = color;
                this.x = Math.floor(BOARD_WIDTH/2) - Math.ceil(shape[0].length/2);
                this.y = 0;
            }

            rotate() {
                const newShape = this.shape[0].map((_,i) => 
                    this.shape.map(row => row[i]).reverse()
                );
                const wallKicks = [
                    [0,0], [-1,0], [1,0], [0,-1], [-2,0], [2,0]
                ];
                
                for(const [dx, dy] of wallKicks) {
                    if(!this.collision(dx, dy, newShape)) {
                        this.shape = newShape;
                        this.x += dx;
                        this.y += dy;
                        return true;
                    }
                }
                return false;
            }

            collision(dx, dy, shape = this.shape) {
                for(let y = 0; y < shape.length; y++) {
                    for(let x = 0; x < shape[y].length; x++) {
                        if(shape[y][x]) {
                            const newX = this.x + x + dx;
                            const newY = this.y + y + dy;
                            if(newX < 0 || newX >= BOARD_WIDTH || newY >= BOARD_HEIGHT) return true;
                            if(newY >= 0 && board[newY][newX]) return true;
                        }
                    }
                }
                return false;
            }
        }

        function createNewPiece() {
            const index = Math.floor(Math.random() * SHAPES.length);
            return new Piece(SHAPES[index], COLORS[index]);
        }

        function mergePiece() {
            for(let y = 0; y < currentPiece.shape.length; y++) {
                for(let x = 0; x < currentPiece.shape[y].length; x++) {
                    if(currentPiece.shape[y][x]) {
                        board[currentPiece.y + y][currentPiece.x + x] = currentPiece.color;
                    }
                }
            }
        }

        function clearLines() {
            let lines = 0;
            for(let y = BOARD_HEIGHT-1; y >= 0; y--) {
                if(board[y].every(cell => cell !== 0)) {
                    board.splice(y, 1);
                    board.unshift(Array(BOARD_WIDTH).fill(0));
                    lines++;
                    y++;
                }
            }
            if(lines > 0) {
                score += lines * 100 * level;
                document.getElementById('score').textContent = score;
                if(score > level * 1000) {
                    level++;
                    dropSpeed = Math.max(100, 1000 - (level-1)*100);
                    document.getElementById('level').textContent = level;
                }
            }
        }

        function drawBlock(x, y, color) {
            ctx.fillStyle = color;
            ctx.beginPath();
            ctx.roundRect(x*BLOCK_SIZE, y*BLOCK_SIZE, BLOCK_SIZE-1, BLOCK_SIZE-1, 5);
            ctx.fill();
            ctx.shadowColor = 'rgba(0,0,0,0.3)';
            ctx.shadowBlur = 5;
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制网格
            ctx.strokeStyle = 'rgba(255,255,255,0.1)';
            for(let y = 0; y < BOARD_HEIGHT; y++) {
                for(let x = 0; x < BOARD_WIDTH; x++) {
                    ctx.strokeRect(x*BLOCK_SIZE, y*BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                }
            }

            // 绘制当前方块
            if(currentPiece) {
                for(let y = 0; y < currentPiece.shape.length; y++) {
                    for(let x = 0; x < currentPiece.shape[y].length; x++) {
                        if(currentPiece.shape[y][x]) {
                            drawBlock(currentPiece.x + x, currentPiece.y + y, currentPiece.color);
                        }
                    }
                }
            }

            // 绘制已固定的方块
            for(let y = 0; y < BOARD_HEIGHT; y++) {
                for(let x = 0; x < BOARD_WIDTH; x++) {
                    if(board[y][x]) {
                        drawBlock(x, y, board[y][x]);
                    }
                }
            }
        }

        function update(time = 0) {
            if(isPaused) return;

            const delta = time - lastDrop;
            if(delta > dropSpeed) {
                if(!currentPiece.collision(0, 1)) {
                    currentPiece.y++;
                } else {
                    mergePiece();
                    clearLines();
                    currentPiece = createNewPiece();
                    if(currentPiece.collision(0,0)) {
                        alert(`游戏结束！得分：${score}`);
                        resetGame();
                    }
                }
                lastDrop = time;
            }

            draw();
            requestAnimationFrame(update);
        }

        function resetGame() {
            board = Array(BOARD_HEIGHT).fill().map(() => Array(BOARD_WIDTH).fill(0));
            score = 0;
            level = 1;
            dropSpeed = 1000;
            document.getElementById('score').textContent = score;
            document.getElementById('level').textContent = level;
            currentPiece = createNewPiece();
            update();
        }

        document.addEventListener('keydown', (e) => {
            if(e.key === ' ') {
                isPaused = !isPaused;
                document.getElementById('pause-overlay').style.display = isPaused ? 'block' : 'none';
                if(!isPaused) update();
                return;
            }
            
            if(isPaused) return;

            switch(e.key) {
                case 'ArrowLeft':
                    if(!currentPiece.collision(-1,0)) currentPiece.x--;
                    break;
                case 'ArrowRight':
                    if(!currentPiece.collision(1,0)) currentPiece.x++;
                    break;
                case 'ArrowDown':
                    dropSpeed = 100;
                    break;
                case 'ArrowUp':
                    currentPiece.rotate();
                    break;
            }
        });

        document.addEventListener('keyup', (e) => {
            if(e.key === 'ArrowDown') {
                dropSpeed = 1000 - (level-1)*100;
            }
        });

        currentPiece = createNewPiece();
        update();

        // 增加的按钮功能
        document.getElementById('up-btn').addEventListener('click', () => {
            if(!isPaused) currentPiece.rotate();
        });

        document.getElementById('down-btn').addEventListener('click', () => {
            if(!isPaused) {
                dropSpeed = 100;
                setTimeout(() => {
                    dropSpeed = 1000 - (level-1)*100;
                }, 100);
            }
        });

        document.getElementById('left-btn').addEventListener('click', () => {
            if(!isPaused && !currentPiece.collision(-1,0)) currentPiece.x--;
        });

        document.getElementById('right-btn').addEventListener('click', () => {
            if(!isPaused && !currentPiece.collision(1,0)) currentPiece.x++;
        });

        document.getElementById('pause-btn').addEventListener('click', () => {
            isPaused = !isPaused;
            document.getElementById('pause-overlay').style.display = isPaused ? 'block' : 'none';
            if(!isPaused) update();
        });
    </script>
</body>
</html>